<template>
  <div>
    <div style="border: 1px solid #e6e6e6">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><van-image src="/img/Carousel/53ab10dd1c9ac70eb90a551864d7ec39.jpeg" /> </van-swipe-item>
        <van-swipe-item><van-image src="/img/Carousel/61edfdadd35d072b7f11f27655cab09b.jpeg" /> </van-swipe-item>
        <van-swipe-item><van-image src="/img/Carousel/53ab10dd1c9ac70eb90a551864d7ec39.jpeg" /> </van-swipe-item>
        <van-swipe-item><van-image src="/img/Carousel/61edfdadd35d072b7f11f27655cab09b.jpeg" /> </van-swipe-item>
      </van-swipe>
      <!-- 分类 -->
      <div class="home_category" size="large">
        <van-button color="#82a9e1">免费专区</van-button>
        <van-button color="#d4b8d6">女生精选</van-button>
      </div>
    </div>
    <!-- 编辑力荐 -->
    <div class="toplist">
      <div class="title">编辑力荐</div>
      <div class="card">
        <div class="book-container">
          <img src="/img/1496234539057.jpg" alt="" />
          <div class="detail">
            <div class="book-title">一世独尊</div>
            <div class="van-multi-ellipsis--l2 desc">一缕剑光，封印他体内八道绝世凶魂，少年执剑起，破九天。</div>
            <div class="author">
              <div><van-icon name="user-circle-o" /> 月如火</div>
              <div><van-tag style="margin-right: 0.5rem" color="#d1acd8">东方玄幻</van-tag><van-tag color="#a1d0d2">连载</van-tag></div>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="book-container">
          <img src="/img/1496234539057.jpg" alt="" />
          <div class="detail">
            <div class="book-title">一世独尊</div>
            <div class="van-multi-ellipsis--l2 desc">一缕剑光，封印他体内八道绝世凶魂，少年执剑起，破九天。</div>
            <div class="author">
              <div><van-icon name="user-circle-o" /> 月如火</div>
              <div><van-tag style="margin-right: 0.5rem" color="#d1acd8">东方玄幻</van-tag><van-tag color="#a1d0d2">连载</van-tag></div>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="book-container">
          <img src="/img/1496234539057.jpg" alt="" />
          <div class="detail">
            <div class="book-title">一世独尊</div>
            <div class="van-multi-ellipsis--l2 desc">一缕剑光，封印他体内八道绝世凶魂，少年执剑起，破九天。</div>
            <div class="author">
              <div><van-icon name="user-circle-o" /> 月如火</div>
              <div><van-tag style="margin-right: 0.5rem" color="#d1acd8">东方玄幻</van-tag><van-tag color="#a1d0d2">连载</van-tag></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.home_category {
  display: flex;
  justify-content: space-around;
  margin: 10px auto;
  .van-button {
    border-radius: 0.4rem;
    line-height: 2.8rem;
    width: 45vw;
    height: 2.8rem;
  }
}
.toplist {
  margin: 0 1rem;
  .title {
    margin: 1rem 0;
    padding-left: 0.75rem;
    border-left: 5px solid #e95e56;
    font-size: 1.25rem;
  }
  .card {
    padding: 0.8rem 0;
    border-bottom: 1px solid #e5e5e5;

    .book-container {
      display: flex;
      img {
        display: block;
        width: 5rem;
      }
      .detail {
        margin-left: 0.8rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .desc,
        .author {
          margin-bottom: 0.6rem;
          line-height: 1.2rem;
          font-size: 0.8rem;
          color: #888;
        }
        .author {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

.female {
  background-color: #c39cc9;
  color: #7297c1;
}
</style>
